{% extends "base.html" %}

{% block title %}首页 - API场景组合测试工具{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12 mb-4">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title">欢迎使用API场景组合测试工具</h2>
                <p class="card-text">这是一个功能强大的API测试工具，支持API信息导入、维护和场景组合。您可以自行选择API信息进行场景组合，场景中可以引用其他场景，并支持编写脚本处理接口返回的数据。</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-code"></i> API管理</h5>
                <p class="card-text">导入、创建和管理API信息，支持多种请求方法和参数配置。</p>
                <a href="{{ url_for('api.list_apis') }}" class="btn btn-primary">进入API管理</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-sitemap"></i> 场景管理</h5>
                <p class="card-text">创建和管理测试场景，支持场景嵌套和脚本编写，实现复杂的测试流程。</p>
                <a href="{{ url_for('scene.list_scenes') }}" class="btn btn-primary">进入场景管理</a>
            </div>
        </div>
    </div>
    
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-server"></i> 环境管理</h5>
                <p class="card-text">配置不同的测试环境，包括基础URL、认证信息和其他环境参数。</p>
                <a href="{{ url_for('environment.list_environments') }}" class="btn btn-primary">进入环境管理</a>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-play-circle"></i> 执行场景</h5>
                <p class="card-text">选择场景和环境，执行测试并查看结果。</p>
                <form id="execute-form" class="mt-3">
                    <div class="mb-3">
                        <label for="scene-select" class="form-label">选择场景</label>
                        <select class="form-select" id="scene-select" required>
                            <option value="">-- 请选择场景 --</option>
                            <!-- 场景列表将通过AJAX加载 -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="env-select" class="form-label">选择环境</label>
                        <select class="form-select" id="env-select" required>
                            <option value="">-- 请选择环境 --</option>
                            <!-- 环境列表将通过AJAX加载 -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="template-data-id" class="form-label">模板数据ID (可选)</label>
                        <input type="text" class="form-control" id="template-data-id">
                    </div>
                    <div class="mb-3">
                        <label for="template-env-select" class="form-label">模板环境 (可选)</label>
                        <select class="form-select" id="template-env-select">
                            <option value="">-- 请选择模板环境 --</option>
                            <!-- 环境列表将通过AJAX加载 -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-success">执行场景</button>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title"><i class="fas fa-history"></i> 最近执行记录</h5>
                <p class="card-text">查看最近的测试执行记录和结果。</p>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>场景</th>
                                <th>环境</th>
                                <th>状态</th>
                                <th>开始时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="recent-executions">
                            <!-- 最近执行记录将通过AJAX加载 -->
                            <tr>
                                <td colspan="6" class="text-center">加载中...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <a href="{{ url_for('record.list_records') }}" class="btn btn-primary">查看所有记录</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 加载场景列表
        $.ajax({
            url: '/scene/',
            type: 'GET',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            success: function(data) {
                if (data && data.scenes && data.scenes.length > 0) {
                    const sceneSelect = $('#scene-select');
                    data.scenes.forEach(function(scene) {
                        sceneSelect.append($('<option>', {
                            value: scene.id,
                            text: scene.name
                        }));
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('加载场景列表失败:', error);
            }
        });
        
        // 加载环境列表
        $.ajax({
            url: '/environment/',
            type: 'GET',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            success: function(data) {
                if (data && data.environments && data.environments.length > 0) {
                    const envSelect = $('#env-select');
                    const templateEnvSelect = $('#template-env-select');
                    data.environments.forEach(function(env) {
                        envSelect.append($('<option>', {
                            value: env.id,
                            text: env.name
                        }));
                        templateEnvSelect.append($('<option>', {
                            value: env.id,
                            text: env.name
                        }));
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('加载环境列表失败:', error);
            }
        });
        
        // 加载最近执行记录
        $.ajax({
            url: '/execution/',
            type: 'GET',
            headers: {'X-Requested-With': 'XMLHttpRequest'},
            success: function(data) {
                if (data && data.executions && data.executions.length > 0) {
                    const recentExecutions = $('#recent-executions');
                    recentExecutions.empty();
                    
                    // 只显示最近5条记录
                    const recentRecords = data.executions.slice(0, 5);
                    recentRecords.forEach(function(exec) {
                        recentExecutions.append(`
                            <tr>
                                <td>${exec.id}</td>
                                <td>${exec.scene_name || '未知场景'}</td>
                                <td>${exec.environment_name || '未知环境'}</td>
                                <td>
                                    <span class="badge ${exec.status === 'SUCCESS' ? 'bg-success' : exec.status === 'RUNNING' ? 'bg-primary' : 'bg-danger'}">
                                        ${exec.status}
                                    </span>
                                </td>
                                <td>${exec.start_time}</td>
                                <td>
                                    <a href="/execution/${exec.id}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i> 查看
                                    </a>
                                </td>
                            </tr>
                        `);
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('加载执行记录失败:', error);
                $('#recent-executions').html('<tr><td colspan="6" class="text-center">加载执行记录失败</td></tr>');
            }
        });
        
        // 提交执行表单
        $('#execute-form').submit(function(e) {
            e.preventDefault();
            
            const sceneId = $('#scene-select').val();
            const envId = $('#env-select').val();
            const templateDataId = $('#template-data-id').val();
            const templateEnvId = $('#template-env-select').val();
            
            if (!sceneId || !envId) {
                alert('请选择场景和环境');
                return;
            }
            
            // 发送执行请求
            $.ajax({
                url: '/execution/',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    scene_id: sceneId,
                    environment_id: envId,
                    template_data_id: templateDataId || null,
                    template_env_id: templateEnvId || null
                }),
                success: function(response) {
                    if (response.success) {
                        alert('场景执行已开始，执行ID: ' + response.execution_id);
                        // 跳转到执行详情页
                        window.location.href = '/execution/' + response.execution_id;
                    } else {
                        alert('执行失败: ' + response.message);
                    }
                },
                error: function() {
                    alert('请求失败，请稍后重试');
                }
            });
        });
    });
</script>
{% endblock %}